<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Measure</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css" />
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            font-family: verdana;
        }
    </style>

    <script src="https://js.arcgis.com/4.16/"></script>
</head>

<body>
<script>
    try{
    require([
        "esri/views/2d/draw/Draw",
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",  "esri/geometry/Polygon",
        "esri/geometry/geometryEngine"
    ], function(Draw, Map, MapView, Graphic,Polygon,geometryEngine) {


            alert("sss");
            var map = new Map({
                basemap: "osm"});
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-77.02, 38.89],
                zoom: 15
            });
            view.ui.add("draw-polyline", "top-left");
            view.ui.add("draw-polygon", "top-left");
            var draw = new Draw({
                view: view
            });
            // 画线按钮
            document.getElementById("draw-polyline").addEventListener("click", function() {
                view.graphics.removeAll();
                // create() will return a reference to an instance of polylineDrawAction
                var action = draw.create("polyline");                    // focus the view to activate keyboard shortcuts for drawing polylines
                view.focus();
                // listen polylineDrawAction events to give immediate visual feedback
                // to users as the polyline is being drawn on the view.
                action.on("vertex-add", drawPolyline);
                action.on("cursor-update", drawPolyline);
                action.on("vertex-remove", drawPolyline);
                action.on("redo", drawPolyline);
                action.on("undo", drawPolyline);
                action.on("draw-complete", drawPolyline);
            });
            // this function is called from the polyline draw action events
            // to provide a visual feedback to users as they are drawing a polyline
            function drawPolyline(event) {
                var vertices = event.vertices;
                //remove existing graphic
                view.graphics.removeAll();
                // create a new polyline
                var polyline = {
                    type: "polyline", // autocasts as Polyline
                    paths: vertices,
                    spatialReference: view.spatialReference
                };
                // create a new graphic representing the polyline, add it to the view
                var graphic = new Graphic({
                    geometry: polyline,
                    symbol: {
                        type: "simple-line", // autocasts as SimpleLineSymbol
                        color: "blue",
                        width: 4,
                        cap: "round",
                        join: "round"
                    }
                }
                view.graphics.add(graphic);
                // calculate the area of the polyline
                var area = geometryEngine.geodesicLength( graphic.geometry, "kilometers");
                var lastSeg = vertices[vertices.length - 1];
                var graphic = new Graphic({
                    geometry: {
                        type: "point",
                        x: lastSeg[0],
                        y: lastSeg[1],
                        spatialReference: view.spatialReference
                    },
                    symbol: {
                        type: "text",
                        color: "green",
                        haloColor: "black",
                        haloSize: "1px",
                        text: area.toFixed(2) + "km",
                        xoffset: 3,
                        yoffset: 3,
                        font: {
                            size: 14, // autocast as Font
                            family: "sans-serif"
                        }
                    }
                });
                view.graphics.add(graphic);
            }
            // 画面按钮
            document.getElementById("draw-polygon").addEventListener("click",
                function() {
                    view.graphics.removeAll();
                    // create() will return a reference to an instance of PolygonDrawAction
                    var action = draw.create("polygon");

                    // focus the view to activate keyboard shortcuts for drawing polygons
                    view.focus();

                    // listen polygonDrawAction events to give immediate visual feedback
                    // to users as the polygon is being drawn on the view.
                    action.on("vertex-add", drawPolygon);
                    action.on("cursor-update", drawPolygon);
                    action.on("vertex-remove", drawPolygon);
                    action.on("redo", drawPolygon);
                    action.on("undo", drawPolygon);
                    action.on("draw-complete", drawPolygon);
                });
            function drawPolygon(event) {
                var vertices = event.vertices;
                //remove existing graphic
                view.graphics.removeAll();
                // create a new polygon
                var polygon = new Polygon({
                    rings: vertices,
                    spatialReference: view.spatialReference
                });
                // create a new graphic representing the polygon, add it to the view
                var graphic = new Graphic({
                    geometry: polygon,
                    symbol: {
                        type: "simple-fill", // autocasts as SimpleFillSymbol
                        color: [218, 102, 144, 0.8],
                        style: "solid",
                        outline: { // autocasts as SimpleLineSymbol
                            color: [255, 255, 255],
                            width: 2
                        }
                    }
                });
                view.graphics.add(graphic);
                // calculate the area of the polygon
                var area = geometryEngine.geodesicArea(polygon, "acres");
                if (area < 0) {
                    // simplify the polygon if needed and calculate the area again
                    var simplifiedPolygon = geometryEngine.simplify(polygon);
                    if (simplifiedPolygon) {
                        area = geometryEngine.geodesicArea(simplifiedPolygon, "acres");
                    }
                }
                // start displaying the area of the polygon
                labelAreas(polygon, area);
            }
            //Label polyon with its area
            function labelAreas(geom, area) {
                var graphic = new Graphic({
                    geometry: geom.centroid,
                    symbol: {
                        type: "text",
                        color: "white",
                        haloColor: "black",
                        haloSize: "1px",
                        text: area.toFixed(2) + " acres",
                        xoffset: 1,
                        yoffset: 1,
                        font: { // autocast as Font
                            size: 14,
                            family: "sans-serif"
                        }
                    }
                });
                view.graphics.add(graphic);
            }

    });
    }
    catch (e) {
        alert(e);
    }

</script>

    <script>


    </script>

<div id="viewDiv">
    <div id="draw-polyline" class="esri-widget--button esri-widget esri-interactive" title="Draw and measure polyline">
        <span class="esri-icon-polyline"></span>
    </div>
    <div id="draw-polygon" class="esri-widget--button esri-widget esri-interactive"
         title="Draw and measure polygon">
        <span class="esri-icon-polygon"></span>
    </div>
    <div>
        dfadsfasf
    </div>
</div>
</body>
</html>
